<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <!-- 头部 -->
      <view class="headerbgc" :style="[top]">
        <image src="../../static/icon/place.png" mode="" style="width: 28rpx; height: 32rpx; margin: 0 10rpx 0 30rpx"></image>
        <view style="font-size: 28rpx; color: #fff; margin-right: 10rpx">郑州</view>
        <view style="display: flex; align-items: center; position: relative">
          <image src="../../static/icon/search.png" mode="" style="width: 28rpx; height: 28rpx; position: absolute; left: 30rpx; z-index: 2"></image>
          <input type="text" class="ipt" id="input" placeholder="搜索文章" />
        </view>
      </view>
      <!-- 版心 -->
      <view class="banner"><image src="../../static/img/idnexbanner.png" mode="aspectFill"></image></view>
      <!-- 接单 -->
      <view style="box-sizing: border-box; display: flex; margin-left: 20rpx">
        <view class="leftbox" @click="goreciveorder">
          <view style="font-size: 30rpx; font-weight: bold">接单中心</view>
          <image src="/static/img/jiedan.png" mode="aspectFill" style="width: 160rpx; height: 160rpx"></image>
        </view>
        <view class="rightbox" @click="goyuyue">
          <view style="font-size: 30rpx; font-weight: bold">上课预约</view>
          <image src="/static/img/yuyue.png" mode="aspectFill" style="width: 160rpx; height: 160rpx"></image>
        </view>
      </view>
      <!-- 预约提示 -->
      <view class="yuyuetip" @click="goyuyue">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">您收到了上课预约</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8">去查看</view>
      </view>
      <!-- 上课列表 -->
      <view class="listtitle">上课列表</view>
      <scroll-view
        scroll-y="true"
        style="box-sizing: border-box; width: 710rpx; height: 320rpx; background: #f9f9f9; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: 20rpx; padding: 0 30rpx"
      >
        <view class="list" v-for="i in 3" :key="i">
          <view class="item2">
            <view class="top">8:00-10:00</view>
            <view class="bottom">初三数学</view>
          </view>
          <view class="item2">
            <view class="top">张同学</view>
            <view class="bottom">2023-10-12</view>
          </view>
          <view class="item2" style="width: 180rpx; height: 120rpx; background: #3553e8; border-radius: 20rpx 20rpx 20rpx 20rpx; color: #fff">
            <view class="top">距上课还有</view>
            <view class="bottom">3:00:00</view>
          </view>
        </view>
      </scroll-view>
      <!-- 案例分享 -->
      <view class="title">案例分享</view>
      <view class="item" @click="goarticledetail">
        <image src="../../static/img/bannerimg1.png" mode="aspectFill"></image>
        <view style="box-sizing: border-box; padding-left: 10rpx; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">教师经典案例分析</view>
      </view>
      <view class="item">
        <image src="../../static/img/bannerimg2.png" mode="aspectFill"></image>
        <view style="box-sizing: border-box; padding-left: 10rpx; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">教师经典案例分析</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isiphone: false,
      top: {
        paddingTop: '0rpx'
      }
    };
  },

  methods: {
    // 跳转到文章详情
    goarticledetail() {
      uni.navigateTo({
        url: '/pages/articledetail/articledetail'
      });
    },
    // 跳转到预约
    goyuyue() {
      uni.navigateTo({
        url: '/sub_yuyue/yuyue/yuyue'
      });
    },
    // 跳转到接单中心
    goreciveorder() {
      uni.navigateTo({
        url: '/sub_order/reciveorder/reciveorder'
      });
    }
  },
  onLoad() {
    const app = getApp();
    console.log(app);
    console.log(app.$vm.isIPhone);
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      this.top.paddingTop = app.$vm.liuhai + 'rpx';
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;

  .headerbgc {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 750rpx;
    height: 180rpx;
    background: #3553e8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .ipt {
    box-sizing: border-box;
    position: absolute;
    left: 10rpx;
    width: 380rpx;
    height: 64rpx;
    background: #5d75ed;
    color: #fff;
    font-style: 26rpx;
    padding-left: 60rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .banner {
    box-sizing: border-box;
    margin: 20rpx;
    width: 710rpx;
    height: 320rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #707070;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .leftbox {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 340rpx;
    height: 180rpx;
    margin-right: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .rightbox {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 340rpx;
    height: 180rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .title {
    margin-top: 30rpx;
    width: 120rpx;
    height: 42rpx;
    font-size: 30rpx;
    padding: 0 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 0rpx;
  }
  .item {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    image {
      width: 710rpx;
      height: 280rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .yuyuetip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 710rpx;
    height: 80rpx;
    margin: 20rpx;
    padding: 0 20rpx;
    background: #f4f6fe;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .listtitle {
    box-sizing: border-box;
    width: 120rpx;
    height: 42rpx;
    font-size: 30rpx;
    margin: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .list {
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 650rpx;
    height: 120rpx;
    margin-top: 30rpx;
    background: #eff2ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .item2 {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33%;
      // height: 120rpx;
      .top {
        font-size: 28rpx;
      }
      .bottom {
        font-size: 26rpx;
      }
    }
  }
}
#input::-webkit-input-placeholder {
  color: #fff !important;
}
</style>